<template>
  <el-collapse
    class="container"
    v-model="activeGroup"
    accordion
    @change="changeHandler"
  >
    <el-collapse-item
      v-for="group in currentGroup"
      :key="group.groupId"
      :name="group.groupId"
    >
      <template class="header" slot="title">
        <i v-if="activeGroup == group.groupId" class="el-icon-caret-bottom"></i
        ><i v-else class="el-icon-caret-right"></i> {{ group.groupName }}
      </template>

      <div class="content">
        <div class="detail">
          <img :src="prefixPicUrl + group.image" alt="" />
          <div class="word">
            <!-- 四川师范大学IT培优
            成立于2011年11月，隶属于四川师范大学计算机科学学院
            ，起初是学院的一个特色项目，后由一群酷爱IT的高年级学生自发组织，经学院批准后，现由学院副院长郭涛老师领导，郑雷老师总负责，成为一个不同于社团、学院两委，致力于打造IT精英的自发性优秀学生组织。在学院颇具影响力。 -->
            {{ group.groupDetail }}
          </div>
        </div>
        <hr />
        <div class="baseinfo">
          <div v-if="group.teacher != null" class="row">
            <i class="el-icon-s-custom"></i
            ><label> 指导教师：{{ group.teacher }}老师</label
            ><i class="el-icon-phone"></i
            ><label> 电话：{{ group.teacherMobile }}</label>
          </div>
          <div v-for="leader in group.leaders" :key="leader.userId" class="row">
            <i class="el-icon-user-solid"></i
            ><label> 负 责 人： {{ leader.realName }}</label
            ><i class="el-icon-s-order"></i
            ><label> 学号：{{ leader.studentId }}</label
            ><i class="el-icon-phone"></i
            ><label> 电话：{{ leader.mobile }}</label
            ><i class="el-icon-chat-dot-round"></i
            ><label> QQ：{{ leader.qq }}</label>
          </div>
        </div>
        <!-- {{ group.groupDetail }} -->
      </div>

      <structure-card
        v-if="group.children != null"
        :currentGroup="group.children"
      />
    </el-collapse-item>
  </el-collapse>
</template>

<script>
import Config from "../config.js";
export default {
  name: "structure-card",
  components: {},
  props: {
    currentGroup: Array,
  },

  data() {
    return {
      activeGroup: 10000,
      isGuest: 1,

      dialogText: "添加小组",
      teaList: [],
      prefixPicUrl: "",
      remoteLoading: false,


      groupFormRules: {
        groupName: [
          { required: true, message: "请输入新建组名", trigger: "blur" },
        ],
        groupDetail: [
          { required: true, message: "请输入小组简介", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.prefixPicUrl = Config.picPrefixUrl;
    // console.log("pre", this.prefixPicUrl);

    this.isGuest = window.sessionStorage.getItem("isGuest");
    this.getTeacherList();
  },

  methods: {
    changeHandler(val) {
      //   console.log("val", val);
      //   console.log("act", this.activeGroup);
    },
    async getTeacherList() {
      if (window.sessionStorage.getItem("teaList") != null) {
        this.teaList = JSON.parse(window.sessionStorage.getItem("teaList"));
        console.log("已从本地取得TeaList！");
        return;
      }
      const res = await this.$axios.get(`${this.HOST}/teacher/api/teacher`);
      // console.log("teaRes", res);
      if (res.data.meta.code == 200) {
        this.teaList = res.data.data.teachers;
        window.sessionStorage.setItem("teaList", JSON.stringify(this.teaList));
        console.log("获取教师列表成功！", this.teaList);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.el-collapse {
  // border: 2px black solid;
  border-radius: 5px;
  padding-left: 10px;
  padding-right: 10px;
  background-color: rgb(255, 255, 255) !important;
  width: 95%;
  margin: auto;

  /deep/ .el-collapse-item__header {
    background-color: rgba(255, 255, 255, 0.486) !important;
    padding-left: 10px;
    font-size: 100%;
    transition: 0.2s ease all;
    letter-spacing: 1px;

    display: flex;
    white-space: pre;
  }

  /deep/ .is-active {
    // font-size: 16px;
    font-size: 110%;
    font-weight: bold;
    transition: 0.2s ease all;
  }

  .content {
    padding-right: 40px;
    font-weight: normal;
    padding-left: 40px;
    color: gray;

    .detail {
      text-indent: 28px;
      color: rgb(83, 83, 83);
      display: flex;

      img {
        width: 150px;
        max-height: 100px;
        height: 100%;
        margin-right: 10px;
      }
    }

    .baseinfo {
      font-size: 14px;

      .row {
        label {
          padding-left: 2px;
          display: inline-block;
          width: 150px;
        }
      }
    }
  }
}


</style>
